<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>取消预约表</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css" />
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<body>
<div id="app">
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="regId"
                label="编号"
                width="70">
        </el-table-column>
        <el-table-column
                prop="user.realname"
                label="用户姓名"
                width="100">
        </el-table-column>
        <el-table-column
                prop="section.sectionName"
                label="预约科室"
                width="100">
        </el-table-column>
        <el-table-column
                prop="admin.name"
                label="医生姓名"
                width="100">
        </el-table-column>
        <el-table-column
                prop="regDate"
                label="预约时间"
                width="130">
        </el-table-column>
        <el-table-column
                prop="regName"
                label="患者姓名"
                width="100">
        </el-table-column>
        <el-table-column
                prop="status"
                label="预约状态"
                width="260">
            <template slot-scope="scope">
                <h5><span v-if="scope.row.status == 9" style="color:red;">您的预约信息还未处理,点击按钮取消</span></h5>
                <h5><span v-if="scope.row.status == 0" style="color: blue">您的预约信息已处理,点击按钮查看详情</span></h5>
                <h5><span v-if="scope.row.status == 1" style="color: gray">您的预约已被拒绝,点击按钮重新预约</span></h5>
                <h5><span v-if="scope.row.status == 2" style="color: gray">改预约已被取消,请重新预约</span></h5>
            </template>
        </el-table-column>
        <el-table-column  label="操作" width="300px">
            <template slot-scope="scope">
                <el-button type="primary" @click="chakan(scope.row)" v-if="scope.row.status == 0">查看病例</el-button>
                <el-button type="primary" @click="downlow(scope.row)" v-if="scope.row.status == 0">下载病例</el-button>
                <el-button type="success" @click="quxiao(scope.row)"  v-if="scope.row.status == 9">取消预约</el-button>
                <el-button type="info" @click="chongxinyuyue"  v-if="scope.row.status == 1">重新预约</el-button>
                <el-button type="info" @click="chongxinyuyue"  v-if="scope.row.status == 2">重新预约</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--查看病例信息-->
    <el-dialog
            title="病历详情"
            :visible.sync="dialogVisible"
            width="80%"
            :before-close="handleClose">
        <!--病例信息-->
        <el-descriptions class="margin-top"  :column="2" :size="size" border>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    患者姓名
                </template>
                {{regData.regName}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    手机号
                </template>
                {{regData.phonenumber}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    预约科室
                </template>
                {{regData.sectionName}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    性别
                </template>
                {{regData.sex}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    预约日期
                </template>
                {{regData.regDate}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    主治医师
                </template>
                {{regData.adminName}}
            </el-descriptions-item>
        </el-descriptions>
        <el-form :label-position="labelPosition"  :model="formLabelAlign">
            <el-form-item label="病情分析:">
                <el-input   type="textarea" readonly="readonly" :rows="1" width="100%" v-model="formLabelAlign.cases"></el-input>
            </el-form-item>
            <el-form-item label="治疗意见:">
                <el-input type="textarea" :rows="3"  readonly="readonly" width="100%"v-model="formLabelAlign.suggest"></el-input>
            </el-form-item>
        </el-form>
        <el-button type="danger" style="width: 15%;margin-left: 350px" @click="dialogVisible = false">取 消</el-button>
        <el-button type="success" style=" width: 15%;margin-right: 230px" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
</div>
</body>
<script>
    var url = window.location.href
    var arr = url.split("&");
    var infoArr=[];
    var day = new Date();
    console.log(infoArr)
    for (let i = 0; i < arr.length ; i++) {
        var a = arr[i].split("=")[1];
        console.log(a)
        infoArr[i]=a;
    }
    var app = new Vue({
        el: "#app",
        data: {
            tableData: [],
            dialogVisible: false,
            regData: {},
            regName: infoArr[0],
            idcard: infoArr[1],
            phonenumber: infoArr[2],
            formLabelAlign: {},
            labelPosition:'top',
        },
        created() {
            this.showTable()
        },
        methods: {
            showTable() {
                axios.post("reg/selectByRegNameIdcardPhonenumber?regName=" + this.regName + "&idcard=" + this.idcard+"&phonenumber="+this.phonenumber).then(resp => {
                    if (resp.data.code == 200) {
                        this.tableData = resp.data.data
                        console.log(this.tableData)
                        this.$message.success("查询预约记录成功");
                    } else {
                        this.$message.error("查询预约记录失败,请核对患者姓名和患者身份证号以及手机号")
                    }
                })
            },
            chongxinyuyue(){
                location.href="appChoseDept.html";
            },
            quxiao(row){
                row.status=2
                axios.post("reg/updateRegByRegId",row).then(resp=>{
                    this.$message.success("取消成功")
                })
            },
            chakan(row) {
                this.dialogVisible = true;
                this.formLabelAlign = row;
                this.regData = row;
            },
            downlow(row) {
                axios.post("excel/download?regId=" + row.regId, {responseType: 'blob'}).then(function (resp) {
                    var blob = new Blob([resp.data])
                    var downloadElement = document.createElement('a');
                    var href = window.URL.createObjectURL(blob); //创建下载的链接
                    downloadElement.href = href;
                    downloadElement.download = "病历详情表" + day.valueOf() + ".xlsx"; //下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                })
            },
        }
    })
</script>
</html>